<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <div class="area-header">
        <span class="area-header-title">{{ $t('变更信息') }}</span>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('变更时间')" prop="changeDate">
            <DatePicker v-model="form.changeDate" :placeholder="$t('变更时间')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('总股本') + $t('金额单位')" prop="totalMoney">
            <Money v-model="form.totalMoney" unit="w" :placeholder="$t('总股本') + $t('金额单位')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('总股数(万股)')" prop="totalNum">
            <!-- <el-input v-model.number="form.totalNum" :placeholder="$t('总股数(万股)')" :maxlength="9" /> -->
            <Money v-model="form.totalNum" unit="w" :placeholder="$t('总股数') + $t('万股')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('阶段')" prop="changeStage">
            <el-select v-model="form.changeStage" filterable :placeholder="$t('阶段')">
              <el-option
                v-for="dict in changeStageOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="area-header">
        <span class="area-header-title">{{ $t('股东信息') }}</span>
      </div>
      <el-table :data="form.holders" border class="formTable">
        <el-table-column :label="$t('股东头像')" align="center" prop="holderName" width="80">
          <template slot-scope="scope">
            <UploadAvatar :logo-info="scope.row.logoInfo" @appendData="uploadImg($event, scope.$index)" />
          </template>
        </el-table-column>

        <el-table-column :label="$t('股东名称')" align="center" prop="holderName">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949; margin-right: 4px">*</i>
            <span>{{ $t("股东名称") }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'holders.' + scope.$index + '.holderName'" :rules="holdersRules.holderName">
              <el-input v-model="scope.row.holderName" :placeholder="$t('股东名称')" maxlength="100" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('股东类型')" align="center" prop="name3">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949; margin-right: 4px">*</i>
            <span>{{ $t("股东类型") }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'holders.' + scope.$index + '.holderType'" :rules="holdersRules.holderType">
              <dictSelect
                v-model="scope.row.holderType"
                :clearable="true"
                dictionary="company_person"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('股份数量(万股)')" align="center" prop="holderNum">
          <template slot-scope="scope">
            <Money v-model="scope.row.holderNum" :placeholder="$t('股份数量(股)')" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('股权比例(%)')" align="center" prop="holderRatio">
          <template slot-scope="scope">
            <Ratio v-model="scope.row.holderRatio" :precision="2" :controls="false" :max="100" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('认缴金额') + $t('金额单位')" align="center" prop="investAmount">
          <template slot-scope="scope">
            <Money v-model="scope.row.investAmount" unit="w" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('认缴时间')" align="center" prop="investDate">
          <template slot-scope="scope">
            <el-form-item :prop="'holders.' + scope.$index + '.investDate'">
              <DatePicker v-model="scope.row.investDate" :placeholder="$t('投资时间')" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('是否实际控制人')" align="center" prop="name3" width="150">
          <template slot-scope="scope">
            <el-form-item :prop="'holders.' + scope.$index + '.whetherActualControl'">
              <dictSelect
                v-model="scope.row.whetherActualControl"
                :clearable="true"
                dictionary="sys_yes_no"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('操作')"
          align="center"
          width="80"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              :v-bind:v-has-permi="['company:holder:remove']"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="delRowHolders(scope.$index,scope.row)"
            >{{ $t('删除') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tol" style="margin-bottom: 50px;">
        <el-button size="small" type="primary" @click="addRowHolder">{{ $t("新增") }}</el-button>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <SaveBtn has-permi="company:holder" :cancel-show="false" />
    </div>
  </div>
</template>

<script>
    import { saveCompanyHolderChange, delHolder, getNewHolderByCid, uploadAvatar } from '@/api/company/holder/companyHolderChange'
    import UploadAvatar from '@/components/Avatar/uploadAvatar'
    export default {
      components: {
        UploadAvatar
      },
        data() {
            return {
              // 表单参数
              form: { holders: [],
                  logoInfo: undefined
              },
              // 遮罩层
              loading: false,
              // 表单校验
              rules: {
                changeDate: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
              },
              // 股东信息表单校验
              holdersRules: {
                holderName: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                holderType: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
              },
              // 股东变更阶段
              changeStageOptions: [],
              // 股东类型字典
              holderTypeOptions: [],
              // 是否字典
              yesNoOptions: [],
              // 查询参数
              queryParams: {
                companyId: ''
              }
            }
        },
        created() {
          // 股东变更阶段
          this.getDicts('shareholder_change_stage').then(response => {
            this.changeStageOptions = response.data
          })
          // 股东类型字典
          this.getDicts('company_person').then(response => {
            this.holderTypeOptions = response.data
          })
          // yes_no
          this.getDicts('sys_yes_no').then(response => {
            this.yesNoOptions = response.data
          })
          // this.init()
        },
        methods: {
          addRowHolder() {
            const row = {
              logoInfo: '',
              holderName: '',
              holderType: '',
              holderNum: '',
              holderRatio: undefined,
              investAmount: undefined,
              investDate: '',
              whetherActualControl: ''
            }
            // this.holders.push(row)
            if (!(this.form.holders instanceof Array)) {
              this.$set(this.form, 'holders', [])
            }
            this.$nextTick(() => {
              this.form.holders.push(row)
            })
          },
          delRowHolders(index, row) {
            const id = row.id
            if (id !== undefined && id !== '' && id != null) {
              this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
              })
                .then(function() {
                  return delHolder(id)
                }).then(() => {
                this.form.holders.splice(index, 1)
                return this.msgSuccess(this.$t('删除成功'))
              })
                .catch(function() {})
            } else {
              this.form.holders.splice(index, 1)
            }
          },
            // 初始化数据
            init() {
              this.reset()
              this.loading = true
              this.queryParams.companyId = this.$route.query.companyId
              this.form.companyId = this.$route.query.companyId
              getNewHolderByCid(this.queryParams).then(response => {
                this.form.holders = response.data.holders
                for (let i = 0; i < this.form.holders.length; i++) {
                      this.form.holders[i].id = undefined
                  }
                this.loading = false
              })
            },
            // 表单重置
            reset() {
                this.form = {
                id: undefined,
                companyId: undefined,
                totalEquity: undefined,
                changeDate: undefined,
                changeStage: 'TZQ',
                createBy: undefined,
                createTime: undefined,
                updateBy: undefined,
                updateTime: undefined,
                remark: undefined,
                holders: []
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                      this.loading = true
                        this.form.source = '1'
                        saveCompanyHolderChange(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                              if (this.$route.query.companyId) {
                                this.$store.dispatch('bussRisk/UPDATE_BUSS_RISK_COUNT', { id: this.$route.query.companyId })
                              }
                                this.$parent.$parent.formOpen = false
                                this.$parent.$parent.getList()
                            } else {
                                this.msgError(response.msg)
                            }
                          this.loading = false
                        }).catch(() => {
                          this.loading = false
                        })
                    } else {
                      this.locationError(document)
                    }
                })
           },
            // 上传图片
            uploadImg(data, index) {
              const formData = new FormData()
              formData.append('avatarfile', data)
              formData.append('id', this.form.holders[index].id)
              uploadAvatar(formData).then(response => {
                if (response.code === 200) {
                  this.form.holders[index].logoInfo = response.msg
                  this.msgSuccess(this.$t('上传成功'))
                } else {
                  this.msgError(response.msg)
                }
              })
            }
        }

    }
</script>
